import React from 'react'
import {delete_item, handle_push_list, change_input_value} from "./store/ActionFunc"
import TodolistUI from './todolistUI'
import {connect} from 'react-redux'

class Todolist extends React.Component {

    render() {
        return (
            <TodolistUI
                list={this.props.list}
                inputvalue={this.props.inputvalue}
                handleChange={this.props.handleChange}
                handleBtnClick={this.props.handleBtnClick}
                deleteItem={this.props.deleteItem}
            />
        )
    }
}

//把store中的state中的东西传到props中
const mapStateToProps=(state)=>{
    return {
        inputvalue:state.inputvalue,
        list:state.list
    }
}

//store.dispatch 给到了这个函数中
//我猜想是通过闭包实现的dispatch给到那些函数之中
const mapDispatchToProps=(dispatch)=>{
    return {
        handleChange(e){
            const action=change_input_value(e.target.value)
            dispatch(action)
        },
        handleBtnClick(){
            const action=handle_push_list()
            dispatch(action)
        },
        deleteItem(index){
            const action=delete_item(index)
            dispatch(action)
        }
    }
}


//一顿猛如虎的封装，把我弄的晕头转向
//把mapStateToProps中的东西，和mapDispatchToProps中的方法映射到Todolist的props中去
export default connect(mapStateToProps,mapDispatchToProps)(Todolist)
